<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>班级页面</title>
<link rel="stylesheet" href="/js/layui-2.5.4/css/layui.css">
<script src="/js/layui-2.5.4/layui.js"></script>
<!-- <script type="text/javascript" src="/js/my_js/inclass.js"></script> -->
<script type="text/javascript" src="/js/layui-2.5.4/xm-select.js"></script>
<style type="text/css">
body .to-fix-select .layui-layer-content {
	overflow: visible;
}
</style>
</head>

<body>
	<!-- 页面结构 -->
	<div>
		<!--class="layui-main"  -->
		<!-- 表格上方标题 -->
		<blockquote class="layui-elem-quote">班级列表</blockquote>
		<form class="layui-form">
			<div class="demoTable">
				搜索班级：
				<div class="layui-inline">
					<input class="layui-input" name="className" id="className"
						placeholder="班级名称" autocomplete="off" maxlength="20">
				</div>
				<div class="layui-inline">
					<input class="layui-input" name="collegename" id="collegename"
						placeholder="学院名称" autocomplete="off" maxlength="20">
				</div>
				<button id="domew" class="layui-btn" class="layui-btn" type="button">搜索</button>
				<button id="resetD" type="reset" class="layui-btn layui-btn-normal">重置</button>
			</div>
		</form>
		<br>
		<!-- 添加按钮 -->
		<a class="layui-btn layui-btn-sm" id="add-inclass-btn">添加数据</a>
		<!-- 添加按钮 -->
		<a class="layui-btn layui-btn-sm layui-btn-danger"
			id="del-inclass-btn">批量删除</a>
		<!-- 数据表 -->
		<table id="inclass-tbl" lay-filter="inclass-tbl"></table>
		<script type="text/html" id="inclass-tbl-toolbar">
      <a class="layui-btn layui-btn-xs" lay-event="updateInClass">编辑</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteInClass">删除</a>
    </script>
		<!-- 数据序号 -->
		<script type="text/html" id="indexTpl">
    	{{d.LAY_TABLE_INDEX+1}}
	</script>
	</div>

	<!-- 添加数据弹出层 -->
	<div id="add-inclass-layer" style="display: none; padding: 20px;">
		<form id="add-inclass-form" class="layui-form layui-form-pane"
			lay-filter="add-inclass-form">
			<div class="layui-form-item">
				<label class="layui-form-label">班级名称</label>
				<div class="layui-input-block">
					<input type="text" name="className" class="layui-input"
						autocomplete="off" placeholder="请输入班级名称" lay-verify="required"
						maxlength="20">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">所属学院 </label>
				<div class="layui-input-block">
					<div id="demo2" class="xm-select-demo"></div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<input type="text" name="remarks" class="layui-input"
						autocomplete="off" placeholder="" maxlength="20">
				</div>
			</div>
			<div class="layui-form-item"
				style="text-align: center; margin-top: 50px">
				<button class="layui-btn" lay-submit
					lay-filter="add-inclass-form-submit">提交</button>
				<button id="resetAddStu" class="layui-btn layui-btn-primary"
					type="reset">重置</button>
			</div>
		</form>
	</div>

	<!-- 更新数据弹出层 -->
	<div id="update-inclass-layer" style="display: none; padding: 20px">
		<div class="layui-form-item" style="display: none;">
			<label class="layui-form-label">id</label>
			<div class="layui-input-block">
				<input id="idS" type="text" name="id" class="layui-input" readonly>
			</div>
		</div>
		<form id="update-inclass-form" class="layui-form layui-form-pane"
			lay-filter="update-inclass-form">
			<div class="layui-form-item">
				<label class="layui-form-label">班级名称</label>
				<div class="layui-input-block">
					<input type="text" name="className" class="layui-input"
						autocomplete="off" placeholder="请输入班级名称" lay-verify="required"
						maxlength="20">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">所属学院 </label>
				<div class="layui-input-block">
					<div id="demo3" class="xm-select-demo"></div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<input type="text" name="remarks" class="layui-input"
						autocomplete="off" placeholder="" maxlength="20">
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<button class="layui-btn" lay-submit
					lay-filter="update-inclass-form-submit">提交</button>
				<button class="layui-btn layui-btn-primary" type="reset">清空</button>
			</div>
		</form>
	</div>
	<script type="text/javascript">
		layui
				.use(
						[ 'jquery', 'table', 'layer', 'form', 'laydate' ],
						function() {
							// 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
							var $ = layui.$;
							var table = layui.table;
							var layer = layui.layer;
							var form = layui.form;
							var laydate = layui.laydate;
							//显示所有数据
							table
									.render({
										elem : '#inclass-tbl',
										url : '/admin/findclass',
										method : 'GET',
										page : true,// 开启分页
										first : '1',
										limit : 10,
										limits : [ 10, 20, 50, 100 ],
										theme : 'ali',
										cols : [ [
												{
													type : 'checkbox',
													fixed : 'left'
												},
												{
													templet : '#indexTpl',
													title : '序号',
													width : 60
												},
												{
													field : 'className',
													title : '班级名称',
												},
												{
													field : 'collegename',
													title : '所属学院',
												},
												{
													field : 'snum',
													title : '班级总人数',
												},
												{
													field : 'updatetime',
													title : '更新时间',
													templet : "<div>{{layui.util.toDateString(d.updatetime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
												},
												{
													field : 'remarks',
													title : '备注',
												},
												{
													toolbar : '#inclass-tbl-toolbar',
													title : '操作',
													align : "center"
												} ] ],
										// 表格容器id，用于表格重载
										id : 'inclass-tbl',
									});

							// 重置输入框resetD
							$('#resetD').on('click', function() {
								$('#reload')[0].reset();
								//$('#nameS').val('');
							});
							// 分页位置
							$('.layui-table-page>div').css("text-align",
									"center");
							// 点击获取数据进行查询
							$('#domew').on(
									'click',
									function() {
										var name = $('#nameS').val();
										var did = $('#didS').val();
										var onuser = $('#onuserS').val();
										var states = $('#stateS').val();
										layui.data('kvalue', {
											key : 'data',
											value : [ {
												key : 'name',
												value : name
											}, {
												key : 'did',
												value : did
											}, {
												key : 'onuser',
												value : onuser
											}, {
												key : 'states',
												value : states
											} ]
										});
										var localTest = layui.data('kvalue');
										console.log(localTest.data); // 获得“贤心”
										// console.log(state);
										table.reload('inclass-tbl', {
											where : {
												name : name,
												did : did,
												states : states,
												onuser : onuser
											}
										});
										$('.layui-table-page>div').css(
												"text-align", "center");
									});

							// 监听行工具栏事件：删除数据与更新数据
							table.on('tool(inclass-tbl)', function(obj) {
								// 获取当前行数据和lay-event的值
								var data = obj.data;
								var event = obj.event;
							});

							// 显示添加数据弹出层
							$('#add-inclass-btn').click(function() {
								// 每次显示前重置表单
								$('#add-inclass-form')[0].reset();
								layer.open({
									type : 1,
									title : '添加班级',
									skin : 'layui-layer-molv',
									area : [ '500px' ],
									content : $('#add-inclass-layer')
								});

							});

							// 班级搜索框弹出
							$.ajax({
								url : "/admin/treeCollege",
								type : "GET",
								dataType : "json",
								success : function(data) {
									console.log([ data.inclass ]);
									str = data.incollege; // 这是一字符串
									var strs = new Array(); // 定义一数组
									strs = str.split("+"); // 字符分割
									var incollege = [ {
										"name" : strs[0],
										"value" : 1
									} ]
									for (i = 1; i < strs.length - 1; i++) {
										incollege = incollege.concat([ {
											"name" : strs[i],
											"value" : i + 1
										} ])// 分割后的字符输出
									}
									var demo2 = xmSelect.render({
										el : '#demo2',
										clickClose : true,// 选中关闭
										model : {// 隐藏单选图标
											icon : 'hidden',
											label : {
												type : 'text'
											}
										},
										radio : true,// 开启单选
										filterable : true,
										paging : true,
										pageSize : 5,
										direction : 'down',// 方向向下
										data : incollege
									})
									var demo3 = xmSelect.render({
										el : '#demo3',
										clickClose : true,// 选中关闭
										model : {// 隐藏单选图标
											icon : 'hidden',
											label : {
												type : 'text'
											}
										},
										radio : true,// 开启单选
										filterable : true,
										paging : true,
										pageSize : 5,
										direction : 'down',// 方向向下
										data : incollege
									})

								},
								error : function() {
									console.log("ajax error");
									layer.open({
										title : '系统提示',
										content : '发生未知错误，请联系管理员！'
									});
								}
							});

							// 添加数据表单提交
							form
									.on(
											'submit(add-inclass-form-submit)',
											function(data) {
												data.field.collegeName = $(
														"#demo2 .label-content")
														.html();
												// console.log(data.field);
												// ajax方式添加数据
												$
														.ajax({
															url : "/admin/addclass",
															type : "POST",
															data : JSON
																	.stringify(data.field),
															contentType : 'application/json',
															dataType : 'json',
															success : function(
																	data) {
																if (data.status == 1) {
																	layer
																			.close(layer.index);
																	$(
																			'#resetAddStu')
																			.click();
																	parent.layer
																			.msg(
																					'添加成功',
																					{
																						icon : 1,
																						shade : 0.4,
																						time : 2000
																					});
																	table
																			.reload('inclass-tbl');
																	$(
																			'.layui-table-page>div')
																			.css(
																					"text-align",
																					"center");
																} else {
																	parent.layer
																			.msg(
																					data.msg,
																					{
																						icon : 2,
																						shade : 0.3,
																						time : 2000
																					});
																}
															},
															error : function() {
																console
																		.log("ajax error");
																layer
																		.open({
																			title : '系统提示',
																			content : '发生未知错误，请联系管理员！'
																		});
															}
														});
												// 阻止表单跳转
												return false;
											});

							// 监听行工具栏事件：删除数据与更新数据
							table
									.on(
											'tool(inclass-tbl)',
											function(obj) {
												// 获取当前行数据和lay-event的值
												var data = obj.data;
												var event = obj.event;

												// 删除数据事件
												if (event === 'deleteInClass') {
													layer
															.confirm(
																	'确定删除该数据吗？',
																	function(
																			index) {
																		// ajax方式删除数据
																		console
																				.log(data.id + 1);
																		$
																				.ajax({
																					url : '/admin/delInC/'
																							+ data.id,
																					type : "DELETE",
																					dataType : 'json',
																					success : function(
																							data) {
																						if (data.status == 1) {
																							parent.layer
																									.msg(
																											'删除成功',
																											{
																												icon : 1,
																												shade : 0.3,
																												time : 2000
																											});
																							table
																									.reload('inclass-tbl');
																							$(
																									'.layui-table-page>div')
																									.css(
																											"text-align",
																											"center");
																						} else {
																							parent.layer
																									.msg(
																											'删除失败',
																											{
																												icon : 2,
																												shade : 0.3,
																												time : 2000
																											});
																						}
																					},
																					error : function() {
																						console
																								.log("ajax error");
																						layer
																								.open({
																									title : '系统提示',
																									content : '发生未知错误，请联系管理员！'
																								});
																					}
																				});
																		layer
																				.close(index);
																	});
												}

												// 更新数据事件
												if (event === 'updateInClass') {
													// 每次显示更新数据的表单前自动为表单填写该行的数据
													$("#idS").val(data.id);
													form
															.val(
																	'update-inclass-form',
																	{
																		"className" : data.className,
																		"remarks" : data.remarks
																	});
													$("#demo3 .xm-tips").html(
															data.collegename);
													// 显示更新数据表单的弹出层
													layer
															.open({
																type : 1,
																title : '更新数据',
																skin : 'layui-layer-molv',
																area : [ '500px' ],
																content : $('#update-inclass-layer')
															});
													// 更新数据表单提交
													form
															.on(
																	'submit(update-inclass-form-submit)',
																	function(
																			data) {
																		// ajax方式更新数据
																		data.field.id = $(
																				"#idS")
																				.val();
																		data.field.collegeName = $(
																		"#demo3 .label-content").html();
																		$
																				.ajax({
																					url : "/admin/updataInClass",
																					type : "PUT",
																					data : JSON
																							.stringify(data.field),
																					contentType : 'application/json',
																					dataType : 'json',
																					success : function(
																							data) {
																						if (data.status == 1) {
																							layer
																									.close(layer.index);
																							parent.layer
																									.msg(
																											'更新成功',
																											{
																												icon : 1,
																												shade : 0.3,
																												time : 2000
																											});
																							table
																									.reload('inclass-tbl');
																							$(
																									'.layui-table-page>div')
																									.css(
																											"text-align",
																											"center")
																						} else if (data.status == 2) {
																							layer
																									.close(layer.index);
																							parent.layer
																									.msg(
																											data.msg,
																											{
																												icon : 6,
																												shade : 0.3,
																												time : 2000
																											});
																							table
																									.reload('inclass-tbl');
																							$(
																									'.layui-table-page>div')
																									.css(
																											"text-align",
																											"center")
																						} else {
																							parent.layer
																									.msg(
																											data.msg,
																											{
																												icon : 2,
																												shade : 0.3,
																												time : 2000
																											});
																						}
																					},
																					error : function() {
																						console
																								.log("ajax error");
																						layer
																								.open({
																									title : '系统提示',
																									content : '发生未知错误，请联系管理员！'
																								});
																					}
																				});
																		// 阻止表单跳转
																		return false;
																	});
												}

											});

							// 批量删除功能
							// 1.得到table选中行内容
							// 2.得到删除需要的唯一值，一般是id;
							// 3.将所要删除的项加入到数组中；
							// 4.判断是否选中；
							// 5.发送ajax请求，并附带参数id；
							$('#del-inclass-btn')
									.on(
											'click',
											function() {
												var checkStatus = table
														.checkStatus('inclass-tbl');
												if (checkStatus.data.length == 0) {
													parent.layer.msg(
															'请先选择要删除的数据行！', {
																icon : 7
															});
													return;
												}
												layer
														.confirm(
																'确定删除该数据吗？',
																function(index) {
																	var ids = "";
																	for (var i = 0; i < checkStatus.data.length; i++) {
																		ids += checkStatus.data[i].id
																				+ ",";
																	}
																	parent.layer
																			.msg(
																					'删除中...',
																					{
																						icon : 16,
																						shade : 0.3,
																						time : 3000
																					});
																	// layer.msg(ids);
																	$
																			.ajax({
																				url : '/admin/inClass/ids?ids='
																						+ ids,
																				type : "DELETE",
																				dataType : 'json',
																				success : function(
																						data) {
																					if (data.status == 1) {
																						parent.layer
																								.msg(
																										'删除成功！',
																										{
																											icon : 1,
																											time : 2000,
																											shade : 0.2
																										});
																						table
																								.reload('inclass-tbl');
																						$(
																								'.layui-table-page>div')
																								.css(
																										"text-align",
																										"center");
																					} else {
																						parent.layer
																								.msg(
																										'删除失败！',
																										{
																											icon : 2,
																											time : 2000,
																											shade : 0.2
																										});
																					}
																				},
																				error : function() {
																					console
																							.log("ajax error");
																					layer
																							.open({
																								title : '系统提示',
																								content : '发生未知错误，请联系管理员！'
																							});
																				}
																			});
																	layer
																			.close(index);
																});

											});
						});
	</script>
</body>

</html>